<template>
	<view>
		<scroll-view scroll-x :scroll-with-animation="true" :show-scrollbar="false" class="scroll-row d-flex a-center px-2" style="box-sizing: border-box; height: 44upx;" >
			<view v-for="(item, index) in tabArr" :key="index" class="scroll-row-item px-3 text-center" style="width: 120upx; height: 44upx; line-height: 44upx;"
			:id="'tab'+index" @click="changeTabIndex(index)"	
			>
				<text class="font-md" :class="tabIndex === index ? 'text-warning':''">{{ item.name }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabArr: [
					{ name: '测试' },
					{ name: '测试1' },
					{ name: '测试2' },
					{ name: '测试3' },
					{ name: '测试4' },
					{ name: '测试5' },
					{ name: '测试6' },
					{ name: '测试7' },
					{ name: '测试8' },
				]
			}
		},
		created() {
			console.log('weex:', weex)
		},
		methods: {
			changeTabIndex(index) {
				this.tabIndex = index
			}
		}
	}
</script>

<style>
</style>
